<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="../include/tag.jsp"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<title>项目详情</title>
<%@include file="../include/commonFile.jsp"%>
	<link rel="stylesheet" href="${ctx}/css/common/list.css">
	<link rel="stylesheet" href="${ctx}/css/ui/activity/zc_act_detail.css">
	<link rel="stylesheet" href="${ctx}/css/common/img_text.css">
	<link rel="stylesheet" href="${ctx}/css/common/list.css">
	<link rel="stylesheet" href="${ctx}/css/common/table.css">
	<link rel="stylesheet" href="${ctx}/css/ui/system/member/member_list.css">
	<link rel="stylesheet" href="${ctx}/css/ui/activity/member_act_list.css">
	<link rel="stylesheet" href="${ctx}/css/ui/activity/publish_act.css">
	<style type="text/css">
		.activity-num {
			width: 50px!important;
		}
		.activity-place {
			width: 600px!important;
			background-color: #F7F7F7;
		}
		.multiple-activity-fb {
			margin-bottom: 0px!important;
		}
		.act-main-body {
			max-height: max-content!important;
		}
	</style>
</head><body>
<%@include file="../include/header.jsp"%>

	<div class="index-outside">
		<%@include file="../include/sidebar.jsp"%>
		<section>
			<div class="section-main">
				<div class="act-detail-head mt20">
				    <div class="act-detail-content">
				        <div class="detail-logo common-img">
							<img src="<c:if test="${ activity.pic!= null}">${activity.pic}?imageMogr2/auto-orient/crop/300x180</c:if>" alt="" onerror="txz.errImg(this)" onload="txz.imgLoad(this)">
						</div>
				    </div>
				    <div class="content-text">
				        <p class="f24 text-titel">${activity.title}</p>
						<c:if test="${crowdfundEvent.isMultiple == 0}">
							<p class="f16 text-element">
								<i class="iconfont icon-remind btn-icon"></i> 活动开始时间：
								<fmt:formatDate value="${activity.startTime}" pattern="yyyy-MM-dd HH:mm" />
							</p>
						</c:if>
						<%--<p class="f16 text-element">
							<c:if test="${crowdfundEvent.isMultiple == 0}">
								<i class="iconfont icon-moneybag btn-icon"></i> 活动金额：<strong class="red mr-30"><fmt:formatNumber value="${activity.price}" pattern="0.00"/></strong>&nbsp;元/位
							</c:if>
						</p>--%>
				        <p class="f16 text-element">
							<i class="iconfont icon-rank btn-icon"></i> 浏览量：<strong class="active-red">${viewNum}</strong>&nbsp;次
							<%--<i class="iconfont icon-people btn-icon "></i> 人数上限：<strong class="red">${activity.limitNum}</strong>&nbsp;人--%>
				            <i class="iconfont icon-people btn-icon ml-30"></i> 报名人数：<strong class="red">${activity.joinNum}</strong>&nbsp;人
				            <i class="iconfont icon-people btn-icon  ml-30"></i> 众筹成功：<strong class="red">${activity.crowdfundedNum}</strong>&nbsp;人
							<i class="iconfont icon-people btn-icon  ml-30"></i> 支持人数：<strong class="red">${activity.favorerNum}</strong>&nbsp;人
							<i class="iconfont icon-moneybag btn-icon ml-30"></i> 已筹金额：<strong class="red"><fmt:formatNumber value="${actualAmount}" pattern="0.00"/></strong>&nbsp;元
				        </p>
						<div>
							<p class="f16 text-element" style="float: left">
								<i class="iconfont icon-remind btn-icon"></i> 发布时间：<fmt:formatDate value="${activity.createDate}" pattern="yyyy-MM-dd HH:mm" />
							</p>
							<p class="f16 text-element" style="float: left">
								<i class="iconfont icon-remind btn-icon  ml-30"></i>报名截止时间：<fmt:formatDate
									value="${activity.endTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
							</p>
							<p class="f16 text-element">
								<i class="iconfont icon-remind btn-icon  ml-30"></i> 修改时间：<fmt:formatDate value="${activity.updateDate}" pattern="yyyy-MM-dd HH:mm" />
							</p>
							<p class="f16 text-element">
								<i class="iconfont icon-location btn-icon"></i> 活动地点：
								${address}
							</p>
						</div>
				    </div>
				</div>
				<div class="mt20">
					<c:set var="numArray" value="${fn:split('一,二,三,四,五', ',')}"></c:set>
					<c:forEach var="eventGradation" items="${eventGradations}" varStatus="status">
						<div class="layui-form-item multiple-activity-fb">
							<label class="activity-num">活动${numArray[status.index]}</label>
							<div class="activity-place">
								<div class="m-height">
									<label class="activity-label">活动地点：</label>
									<div class="activity-info">${eventGradation.cityName}${eventGradation.area}${eventGradation.place}</div>
								</div>
								<div class="m-height">
									<label class="activity-label">活动信息：</label>
									<div class="activity-info">
										<fmt:formatNumber value="${eventGradation.price}" pattern="#.##" />元/人</div>
									<label class="activity-label">限制人数：</label>
									<div class="activity-info">${eventGradation.limitNum}人</div>
									<label class="activity-label">截止时间：</label>
									<div class="activity-info">
										<fmt:formatDate value="${eventGradation.endTime}" pattern="yyyy-MM-dd HH:mm" />
									</div>
								</div>
							</div>
						</div>
					</c:forEach>
				</div>
				<div class="layui-tab mt20">
					<ul class="layui-tab-title">
						<li class="layui-this">详情描述</li>
						<li>报名相关</li>
						<li>参赛标准</li>
					</ul>
					<div class="layui-tab-content">
						<div class="layui-tab-item layui-show" >
							<div id="content">
								<div class="act-main-body img-text-content">
									${activityDetail.content}
								</div>
							</div>
						</div>
						<div class="layui-tab-item" >
							<div id="applyRelated">
								<div class="act-main-body img-text-content">
									${activityDetail.applyRelated}
								</div>
							</div>
						</div>
						<div class="layui-tab-item" >
							<div id="matchStandard">
								<div class="act-main-body img-text-content">
									${activityDetail.matchStandard}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>	<%@include file="../include/footer.jsp"%>
		</section>
	</div>

	<script type="text/javascript" src="${ctx}/script/common/img_text.js"></script>
	<script type="text/javascript" src="${ctx}/script/common/list.js"></script>
	<script type="text/javascript">
		var activeTab = 1;

		var laytpl = null;
		var laypage = null;
		var element = null;
        txz.initHeader({
            nav:[{
                name: '众筹项目',
                href: '${ctx}/activity/activity/zcActivityList.do'
            },{
                name: '众筹项目详情',
				curr: true
			}],
            btns:[{
                type: 'back'
            }]
        });

		$(function() {

            layui.use([ 'laytpl', 'laypage', 'element' ], function() {
                element = layui.element;
                element.on('tab', function(data) {
                    var content = $(".layui-tab-content").find(".layui-show").find(".img-text-content");
                    var imgs = $(content).find("img");
                    for (var i = 0; i < imgs.length; i++) {
                        var img = imgs[i];
                        imgText.changeWH(img);
                    }
                });
            });
			$(".img-text-content").each(function(index, element) {
				imgText.initImgNew(this);
			});
			setTimeout(function() {
				var recommendSettings = {
					parent : $('#content .img-text-content')
				};
				$('.lazy-img').picLazyLoad(recommendSettings);

				var detailSettings = {
					parent : $('#applyRelated .img-text-content')
				};
				$('.lazy-img').picLazyLoad(detailSettings);

				var noticeSettings = {
					parent : $('#matchStandard .img-text-content')
				};
				$('.lazy-img').picLazyLoad(noticeSettings);
			}, 100);
		})
	</script>
</body>
</html>
